<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { reactive, ref, nextTick, onMounted } from "vue";
import jobSchedulerServiceApi from "@/api/modules/org/bean/job-scheduler";
import OrgJobSchedulerApi from "@/api/modules/org/bean/job-scheduler";
import { deletePageTableSelectionDataList } from "@/utils/api-service";
import { jumpPath } from "@/utils/router-kit";
import { OrgJobSchedulerAddUrl, OrgJobSchedulerEditUrl } from "@/views/org/mapping.json";
import { JxtechPageTableColumn } from "@whjxtech/jxtech-component";
import { useJxtechPageTableExt } from "@/comp-ext";
const OrgJobSchedulerTableRef = ref();

const { loadTable, deleteSelectionDataList } = useJxtechPageTableExt(OrgJobSchedulerTableRef);

const tableColumn: JxtechPageTableColumn[] = [
  { label: "序号", width: "50", type: "selection" },
  { label: "序号", width: "50", type: "index" },
  {
    prop: "crontaskname",
    label: "任务名称",
    width: "200",
    showOverflowTooltip: true,
    type: "link",
    linkClick: (row: any) => {
      jumpPath(OrgJobSchedulerEditUrl + row.uuid);
    }
  },
  { prop: "classname", label: "类", showOverflowTooltip: true },
  { prop: "taskplan", label: "任务计划", showOverflowTooltip: true, width: "200" },
  { prop: "active", label: "状态", width: "100", slot: "customStatus" },
  { prop: "startTime", label: "起始时间", width: "200", sort: true },
  { prop: "endTime", label: "截止时间", width: "200", sort: true },
  { label: "操作", width: "150", slot: "customAction" }
];

const OrgJobSchedulerState = reactive({
  queryParam: { likeAll: "" },
  /**
   * 表格数据加载的方法
   */
  loadData: (params: any) =>
    OrgJobSchedulerApi.queryPage({ queryName: "defaultQuery" }, { ...params, ...OrgJobSchedulerState.queryParam }),
  /**
   * 表格导出excel的方法
   */
  expData: (params: any) =>
    OrgJobSchedulerApi.exportData({ queryName: "defaultQuery" }, { ...params, ...OrgJobSchedulerState.queryParam }),
  /**
   * 表格删除事件
   */
  deleteTableData: () => {
    deleteSelectionDataList(OrgJobSchedulerApi);
  },
  /**
   * 新增按钮点击事件
   */
  onAddButtonClick: () => jumpPath(OrgJobSchedulerAddUrl),
  /**
   * 搜索事件触发
   */
  handleSearch: () => loadTable(),
  /////// 操作 start ///////
  /** 启动按钮点击事件 */
  onStartClick: (row: any) => {
    jobSchedulerServiceApi.changeJobStatus(row.uuid).then(res => {
      ElMessage({ type: "success", message: "修改成功" });
      OrgJobSchedulerTableRef.value.loadTable();
    });
  },
  /** 执行按钮点击事件 */
  onExecClick: (row: any) => {
    jobSchedulerServiceApi.runOnceJob(row.uuid).then(res => {
      ElMessage({ type: "success", message: "执行成功" });
    });
  }
  /////// 操作 end ///////
});

onMounted(() => loadTable());

defineExpose({
  getOrgJobSchedulerTableRef: () => OrgJobSchedulerTableRef.value,
  onDeleteButtonClick: () => OrgJobSchedulerState.deleteTableData(),
  onAddButtonClick: () => OrgJobSchedulerState.onAddButtonClick()
});
</script>
<template>
  <div>
    <div class="container-card">
      <jxtech-basic-card title="定时任务">
        <template #operationSpace>
          <jxtech-search-input
            tips="任务名称"
            v-model="OrgJobSchedulerState.queryParam.likeAll"
            @search="OrgJobSchedulerState.handleSearch"
          >
          </jxtech-search-input>
          <jxtech-add-button @click="OrgJobSchedulerState.onAddButtonClick" v-auth="'org:xtpz:dsrwgl:save'"> </jxtech-add-button>
          <jxtech-delete-button
            @click="OrgJobSchedulerState.deleteTableData"
            v-auth="'org:xtpz:dsrwgl:delete'"
          ></jxtech-delete-button>
        </template>

        <JxtechPageTableExt
          ref="OrgJobSchedulerTableRef"
          row-key="uuid"
          :table-column="tableColumn"
          :load-data="OrgJobSchedulerState.loadData"
          :exp-data="OrgJobSchedulerState.expData"
          full-table
        >
          <template #customStatus="{ row }">
            <el-tag :type="row.active ? 'success' : 'danger'">{{ row.active ? "运行" : "停止" }}</el-tag>
          </template>
          <template #customAction="{ row }">
            <el-button
              :type="row.active ? 'danger' : 'success'"
              size="small"
              plain
              @click="OrgJobSchedulerState.onStartClick(row)"
              >{{ row.active ? "停止" : "启动" }}
            </el-button>
            <el-button type="success" size="small" plain @click="OrgJobSchedulerState.onExecClick(row)">执行 </el-button>
          </template>
        </JxtechPageTableExt>
      </jxtech-basic-card>
    </div>
  </div>
</template>
